<script setup>
import { onLoad, onPageScroll, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { dianzanShop, getShopDetail, shoucangShop, xihuanShop } from '@/api/shop'
import NavBar from '@/components/NavBar.vue'
import TabBar from '@/components/TabBar.vue'
import { useUserStore } from '@/stores/user'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

onLoad(({ id }) => {
  onGetShopDetail(id)
})

const shopDetail = ref({
  id: '',
  cover: '',
  name: '',
  introduce: '',
  worktime: '',
  phone: '',
  address: '',
  latitude: 0,
  longitude: 0,
  foods: [],
  slides: [],
  isDianzan: false,
  isShoucang: false,
  isXihuan: false,
})
async function onGetShopDetail(id) {
  const { result } = await getShopDetail(id)
  shopDetail.value = {
    ...result,
    cover: fixCoverImageUrl(result.cover),
    foods: result.foods?.map(item => ({ ...item, cover: fixCoverImageUrl(item.cover) })),
    slides: result.slides?.map(item => fixCoverImageUrl(item)),
  }
}

function onCallShop() {
  uni.makePhoneCall({ phoneNumber: shopDetail.value.phone })
}

function onShowAddress() {
  uni.openLocation({
    latitude: +shopDetail.value.latitude,
    longitude: +shopDetail.value.longitude,
    name: shopDetail.value.name,
    address: shopDetail.value.address,
  })
}

function goFoodDetail(id) {
  uni.navigateTo({ url: `/pages/shop/view/food-detail?id=${id}` })
}

const { isLogin } = storeToRefs(useUserStore())
function onChangeTabStatus(type) {
  if (!isLogin.value) {
    uni.switchTab({ url: '/pages/me/index' })
    return
  }

  switch (type) {
    case 'xihuan':
      if (!shopDetail.value.isXihuan)
        xihuanShop(shopDetail.value.id)
      shopDetail.value.isXihuan = !shopDetail.value.isXihuan
      break
    case 'shoucang':
      if (!shopDetail.value.isShoucang)
        shoucangShop(shopDetail.value.id)
      shopDetail.value.isShoucang = !shopDetail.value.isShoucang
      break
    case 'dianzan':
      if (!shopDetail.value.isDianzan)
        dianzanShop(shopDetail.value.id)
      shopDetail.value.isDianzan = !shopDetail.value.isDianzan
      break
    default:
      break
  }
}

onPullDownRefresh(async () => {
  await onGetShopDetail(shopDetail.value.id)
  uni.stopPullDownRefresh()
})

onShareAppMessage(() => {
  return {
    title: shopDetail.value.name,
    path: `/pages/shop/view/shop-detail?id=${shopDetail.value.id}`,
  }
})
</script>

<template>
  <view class="bg-[#F5F5F5] min-h-safe">
    <NavBar :title="shopDetail.name" :scroll-top="scrollTop" />
    <main class="px-2 pt-1.5">
      <view class="mb-1.5">
        <swiper
          class="bg-white rounded h-435 overflow-hidden"
          circular
          indicator-dots
          autoplay
          indicator-active-color="#FBA414"
        >
          <swiper-item v-for="item in shopDetail.slides" :key="item">
            <image class="h-full w-full" :src="item" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <view class="px-2 mb-1.5 bg-white rounded text-28">
        <view class="pb-4.5">
          <view class="pt-3 mb-5 font-semibold">
            {{ shopDetail.introduce }}
          </view>
          <view class="mb-4 text-[#666] flex justify-between items-center">
            <view class="flex w-4/5">
              <view class="text-black shrink-0">
                营业时间：
              </view>
              <view>{{ shopDetail.worktime }}</view>
            </view>
          </view>
          <view class="mb-4 text-[#666] flex justify-between items-center">
            <view class="flex w-4/5">
              <view class="text-black shrink-0">
                商家电话：
              </view>
              <view>{{ shopDetail.phone }}</view>
            </view>
            <nut-button plain size="mini" custom-color="#FF4D00" @click="onCallShop">
              拨打
            </nut-button>
          </view>
          <view class="mb-4 text-[#666] flex justify-between items-center">
            <view class="flex w-4/5">
              <view class="text-black shrink-0">
                门店地址：
              </view>
              <view>{{ shopDetail.address }}</view>
            </view>
            <nut-button plain size="mini" custom-color="#FF4D00" @click="onShowAddress">
              位置
            </nut-button>
          </view>
        </view>
      </view>
      <view>
        <view class="flex flex-wrap justify-between">
          <view
            v-for="item in shopDetail.foods"
            :key="item.id"
            class="mb-1.5 bg-white rounded shadow flex flex-col w-352 overflow-hidden"
            @click="goFoodDetail(item.id)"
          >
            <image class="h-352 w-352" :src="item.cover" mode="aspectFill" />
            <view class="text-[#666] flex justify-between">
              <p class="px-1.5 py-2 text-28">
                {{ item.name }}
              </p>
              <view class="px-1.5 center">
                <view class="i-ant-design:heart-outlined" />
                <view class="pl-0.5 text-20">
                  {{ item.xihuan }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </main>
    <TabBar>
      <view class="text-[#666] flex h-full justify-around items-center">
        <view class="center flex-col" @click="onChangeTabStatus('xihuan')">
          <view v-if="!shopDetail.isXihuan" class="i-ant-design:heart-outlined" />
          <view v-else class="i-ant-design:heart-fill text-[#FF4D00]" />
          <text class="mt-1 text-xs">
            喜欢
          </text>
        </view>
        <view class="center flex-col" @click="onChangeTabStatus('shoucang')">
          <view v-if="!shopDetail.isShoucang" class="i-ant-design:star-outlined" />
          <view v-else class="i-ant-design:star-fill text-[#FF4D00]" />
          <text class="mt-1 text-xs">
            收藏
          </text>
        </view>
        <view class="center flex-col" @click="onChangeTabStatus('dianzan')">
          <view v-if="!shopDetail.isDianzan" class="i-ant-design:like-outlined" />
          <view v-else class="i-ant-design:like-fill text-[#FF4D00]" />
          <text class="mt-1 text-xs">
            点赞
          </text>
        </view>
        <button class="p-0 m-0 bg-transparent text-[#666]" open-type="share">
          <view class="center flex-col">
            <view class="i-ant-design:export-outlined text-30" />
            <view class="mt-1 text-xs">
              分享
            </view>
          </view>
        </button>
      </view>
    </TabBar>
  </view>
</template>

<style scoped>
button::after {
  border: none;
}
</style>
